<template>
  <div>
    <el-card class="box-card" style="margin-top: 20px">
      <el-row>
        <el-col :span="3">
          <el-input placeholder="订单号" v-model="searchCondition.orderNum" clearable></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="optTime"
              type="datetimerange"
              start-placeholder="下单时间"
              end-placeholder="下单时间"
              :default-time="['12:00:00']"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="optTimeHandle"
            ></el-date-picker>
          </div>
        </el-col>
        <el-col :span="2" :offset="6">
          <el-select
            v-model="searchCondition.payMethod"
            clearable
            placeholder="支付方式"
            @change="handlePayMethod"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.payMethod"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-input placeholder="买家昵称" v-model="searchCondition.userName" clearable></el-input>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-input placeholder="手机号" v-model="searchCondition.userTel" clearable></el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-col :span="2">
          <!-- 导出所有的订单数据  -->
          <download-excel
            class="export-excel-wrapper"
            :data="tableData"
            :fields="json_fields"
            :header="title"
            name="订单.xls"
          >
            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
            <el-button size="small" type="warning">导出订单(Excel)</el-button>
          </download-excel>
        </el-col>
        <el-col :span="2" style="margin-left: 20px;">
          <download-excel
            class="export-excel-wrapper"
            :data="DetailsForm"
            :fields="json_fields"
            :header="title"
            name="订单.xls"
          >
            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
            <el-button size="small" type="warning">导出选中的订单(Excel)</el-button>
          </download-excel>
        </el-col>
        <el-col :span="2" style="margin-left: 100px;">
          <el-button type="info" @click="reset">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="selInfo">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-row>
      <el-col :span="24">
        <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index>全部</el-menu-item>
          <el-menu-item index="0">办理中</el-menu-item>
          <el-menu-item index="1">待付款</el-menu-item>
          <el-menu-item index="2">已付款</el-menu-item>
          <el-menu-item index="3">已发货</el-menu-item>
          <el-menu-item index="4">交易完成</el-menu-item>
          <el-menu-item index="5">已取消</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px">
      <el-col>
        <el-table
          :data="tableData"
          border
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column prop label type="selection"></el-table-column>
          <el-table-column prop="id" label="订单编号" width="180"></el-table-column>
          <el-table-column prop="actualAmount" label="订单金额" width="180"></el-table-column>
          <el-table-column label="买家信息">
            <template slot-scope="scope">
              <div>用户： {{ scope.row.userName }}</div>
              电话： {{ scope.row.userTel }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="下单时间"></el-table-column>
          <el-table-column prop="paymentId" label="支付方式"></el-table-column>
          <el-table-column prop="state" label="订单状态"></el-table-column>
          <el-table-column prop label="操作">
            <template slot-scope="scope">
              <el-link type="primary" @click="caoZuo(scope.row)">订单详情</el-link>
              &nbsp;
              <el-link type="primary" v-if="scope.row.state =='已发货'||scope.row.state =='待收货'
              ||scope.row.state =='交易完成'" @click="printInvoice(scope.row.id)">打印电子发票</el-link>
              &nbsp;
              <el-link type="primary" @click="deliverGoods(scope.row)" v-if="scope.row.state=='待发货'">
                发货
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row>
      <el-col :span="7" :offset="15">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 4, 5, 8, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @next-click="nextPage"
            @prev-click="prevPage"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="发货" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="快递单号:">
      <el-input v-model="form.logId"></el-input>
    </el-form-item>
    <el-form-item label="选择快递公司:">
      <el-select v-model="form.lcid" placeholder="请选择快递公司">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option v-for="ld in lcidList" :key="ld.id" :label="ld.logisticsCompanyName" :value="ld.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <span>收件人:{{addr.addressName}}</span>
    </el-form-item>
    <el-form-item>
      <span>手机号:{{addr.addressTel}}</span>
    </el-form-item>
    <el-form-item>
      <span>地址: {{ addr.province }}{{ addr.city }}{{ addr.county
      }}{{ addr.detail }}</span>
    </el-form-item>
    <el-form-item>
      <span>订单编号：{{orderId}}</span>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="faHuo">发 货</el-button>
  </div>
</el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderId:"",
      lcidList:[],
      addr:[],
      dialogFormVisible:false,
      form:{},
      ecssList: [
        { id: "0", value: "ecss" },
        { id: "1", value: "中移" },
      ],
      DetailsForm: [],
      json_fields: {
        //映射字段值
        订单编号: {
          field: "id",
          callback: value => {
            return "&nbsp;" + value;
          }
        },
        订单金额: "actualAmount",
        用户: "userName",
        电话: "userTel",
        下单时间: "createTime",
        支付方式: "paymentId",
        订单状态: "state"
      },
      title: "中移在线客服系统订单表",
      selectData: [],
      pageNum: 1,
      pageSize: 5,
      total: null,
      activeIndex: "",
      searchCondition: {
        payMethod: "",
        orderNum: "",
        orderStartTime: "",
        orderEndTime: "",
        userName: "",
        userTel: "",
        orderStatus: ""
      },
      options: [],
      tableData: [],
      optTime: [],
    };
  },
  methods: {
    faHuo(){
      console.log(this.form);
      let params={
        addrDto:this.addr,
        logisticsId:this.form.logId,
        logisticsCompanyId:this.form.lcid,
        orderId:this.orderId
      };
      this.$axios.post("api/order-server/AddDeliverGoods",params).then(res=>{
        if(res.data.code==200){
          this.$message({
            message: "发货成功",
            type: "success"
          });
          this.searchOrderByCondition();
          this.form={};
          this.addr=[];
          this.orderId="";
          this.dialogFormVisible=false;
        }
      })
    },
    //发货
    deliverGoods(val){
      console.log(val);
      //传入订单编号
      this.dialogFormVisible=true;
      this.orderId=val.id;
      this.$axios.post('api/order-server/queryShipment',this.orderId).then(res=>{
        console.log(res.data);
        if(res.data.code==200){
          this.form.logId=res.data.data.logisticsId;
          this.lcidList = res.data.data.logisticsCompany;
          this.addr=res.data.data.addrDTO;
        }
      });
    },
    printInvoice(id){
      this.$router.push({
        path:"/ZYElectronicInvoice",
        query:{
          id:id
        }
      })
    },
    caoZuo(val){
      this.$router.push({
        path: "/ZYproductListDetail",
        query:{
          id:val.id
        }
      })
    },
    handleSelectionChange(val) {
      this.DetailsForm = val;
    },
    reset() {
      this.optTime = [];
      this.searchCondition = {
        payMethod: "",
        orderNum: "",
        orderStartTime: "",
        orderEndTime: "",
        productName: "",
        userName: "",
        userTel: "",
        productId: "",
        orderStatus: "",
      };
    },
    prevPage(val) {
      this.pageNum = val;
      this.searchOrderByCondition();
    },
    nextPage(val) {
      this.pageNum = val;
      this.searchOrderByCondition();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchOrderByCondition();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchOrderByCondition();
    },
    selInfo() {
      this.pageNum = 1;
      this.searchOrderByCondition();
    },
    selectPayment() {
      this.$axios.get("api/order-server/selectPayment").then(res => {
        if (res.data.code == 200) {
          this.options = res.data.data;
        }
      });
    },
    handleSelect(key, keyPath) {
      console.log(key);
      this.searchCondition.orderStatus = key;
      this.selInfo();
    },
    optTimeHandle() {
      this.searchCondition.orderStartTime = this.optTime[0];
      this.searchCondition.orderEndTime = this.optTime[1];
    },
    selInfo() {
      this.pageNum = 1;
      this.searchOrderByCondition();
    },
    handlePayMethod() {
      this.selInfo();
    },
    searchOrderByCondition() {
      let params = {};
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      params.param = this.searchCondition;
      this.$axios.post("api/order-server/selectAllOrder", params).then(res => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.pageNum = res.data.data.pageNum;
          this.total = res.data.data.total;
          this.pageSize = res.data.data.pageSize;
          this.tableData = res.data.data.list;
          let data = res.data.data.list;
          let data2 = Array.from(data);
          data2.forEach(e => {
            if (e.paymentId == 1) {
              e.paymentId = "支付宝";
            }
            if (e.paymentId == 2) {
              e.paymentId = "微信";
            }
            switch (e.state) {
              case "0": {
                e.state = "办理中";
                break;
              }
              case "1": {
                e.state = "未付款";
                break;
              }
              case "2": {
                e.state = "待发货";
                break;
              }
              case "3": {
                e.state = "待收货";
                break;
              }
              case "4": {
                e.state = "交易完成";
                break;
              }
              case "5": {
                e.state = "已取消";
              }
            }
          });
          this.tableData = data2;
          console.log(this.tableData);
        }
      });
    }
  },
  created() {
    this.selectPayment();
    this.searchOrderByCondition();
  },
  mounted(){
    window.vue = this;
  }
};
</script>

<style scoped>
.export-excel-wrapper {
  display: inline-block;
  margin-left: 10px;
  margin-top: 8px;
}
</style>